<!-- 用户管理页面 -->
<template>
  <el-card style="border-radius: 5px">
    <template #header>
      <div class="card-header">
        <h3>用户管理</h3>
      </div>
    </template>
    <!-- tab导航栏 -->
    <el-tabs v-model="activeName">
      <!-- 添加新用户按钮 -->
      <el-button class="add-newUsers"
        ><el-icon style="margin-right: 5px"><Plus /></el-icon
        >添加新用户</el-button
      >
      <el-tab-pane label="用户" name="first">
        <el-table :data="userTableData" border style="width: 100%">
          <el-table-column
            prop="username"
            label="用户名称"
            width="180"
            align="center"
          />
          <el-table-column
            prop="role"
            label="角色"
            width="180"
            align="center"
          />
          <el-table-column prop="phone" label="手机号" align="center" />
          <el-table-column
            prop="controls"
            label="操作"
            width="180"
            align="center"
          >
            <el-button text style="color: rgb(44, 182, 156)">编辑</el-button
            ><el-button text style="color: rgb(192, 72, 81)"
              >删除</el-button
            ></el-table-column
          >
        </el-table></el-tab-pane
      >
      <el-tab-pane label="权限" name="second"
        ><el-table :data="roleTableData" border style="width: 100%">
          <el-table-column prop="role" label="角色" align="left" />
          <el-table-column prop="controls" label="操作" align="center">
            <el-button text style="color: rgb(44, 182, 156)">编辑</el-button
            ><el-button text style="color: rgb(192, 72, 81)"
              >删除</el-button
            ></el-table-column
          >
        </el-table></el-tab-pane
      >
    </el-tabs>
  </el-card>
</template>

<script setup>
import { ref } from "vue";

const activeName = ref("first");

// 表格数据
const userTableData = [
  {
    username: "张三",
    role: "玩家",
    phone: "13211112222",
  },
  {
    username: "李四",
    role: "玩家",
    phone: "13211112222",
  },
];

const roleTableData = [
  { role: "玩家" },
  { role: "vip玩家" },
  { role: "boss" },
  { role: "npc" },
];
</script>

<style scoped>
::v-deep(.el-tabs__active-bar) {
  background-color: rgb(44, 182, 156); /* 将激活状态下的下划线颜色设置为蓝色 */
}
.el-tabs__item,
.el-tabs__item:hover,
::v-deep(.el-tabs__item),
::v-deep(.el-tabs__item),
::v-deep(.el-tabs__item:hover),
::v-deep(.el-tabs__item.is-active) {
  color: rgb(44, 182, 156);
}
.add-newUsers,
.add-newUsers:hover {
  float: right;
  margin-bottom: 40px;
  height: 35px;
  margin-right: 50px;
  color: white;
  background-color: rgb(44, 182, 156);
}
</style>